<template>
	<view class="tipwrapper p_20" v-if="homeTip">
		<view class="tipbody flexcolumn aligncenter justifycenter">
			<music v-if="music_url" :style="{top:customTop}" class="music" :music_url="music_url"></music>
			<view class="tiptop" :style="{top:customTop}">

				<view class="c_fff bg_FB340C f16 tipbtn flexcenter" @click="tsfn1">提示</view>
			</view>
			<view style="margin-top:40rpx">
				<!-- <view>
					<pick-regions :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion">
						<view>{{regionName}}</view>
					</pick-regions>

				</view> -->
				<view class="flexcenter c_fff f14 mb_10">提示</view>
				<view class="flexcenter c_fff f14 textcenter infolist">
					点击详情按钮即可查看活动规则、排行榜、奖品等信息。
				</view>
			</view>
			<view class="hometipbox">
				<image :src="`${imgPath}/upload/we/common/hometip.png`" alt="" class="hometips"></image>
				<view class="gametext" @click="start">
					<image :src="`${imgPath}/upload/we/common/gametext.png`" alt=""></image>
				</view>
				<view class="gamenum flexcolumn aligncenter justifycenter f15 c_fff">
					<view>已有{{userNum}}人参加活动</view>
					<view>您今天还有{{times}}次参与机会</view>
				</view>
			</view>
			<!-- <div class="gamebtn flexcenter f20 c_fff" @click="start">开始游戏</div> -->
			<!-- <div class="flexcolumn aligncenter justifycenter c_fff f14 mt_24">
        <div>已有{{userNum}}人参加活动</div>
        <div>您今天还有{{times}}次参与机会</div>
      </div> -->
			<view class="infodraw" @click="lwfn">
				<image :src="`${imgPath}/upload/we/common/gift.png`" alt=""></image>
			</view>
			<view class="infocomplain c_fff f16" @click="tousufn">
				客服
			</view>
			<!-- <div class="po_bottom flexcolumn aligncenter">
        <img src="@/assets/1.png" alt="" class="gift" @click="lwfn" />
        <img src="@/assets/tips.png" alt="" class="tips2" @click="tousufn" />
      </div> -->
		</view>
		<uni-popup ref="show_reweima" v-model="show_reweima" class="popup_erweima_box" type="center">
			<view class="box1">
				<image style="width: 100%;height: 100%;" :src="`${imgPath}/upload/we/common/qrcode.png`" alt="">
				</image>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import music from './music.vue'
	export default {
		props: ["music_url"],
		data() {
			return {
				customTop: 0,
				region: [],
				defaultRegion: ['', '', ''],
				defaultRegionCode: '',
				imgPath: uni.$http.baseUrl,
				userNum: 0,
				times: 0,
				show_reweima: false,
				// isShow:true
			};
		},
		created() {
			this.getNum();
		},
		mounted() {

			this.customTop = (Number(uni.getStorageSync('customTop', 'session')) + 10) + "px";
			//this.$refs.turnPopup.open();
		},
		components: {
			music
		},
		computed: {
			regionName() {
				// 转为字符串
				var region = this.region.map(item => item.name).join(' ')
				return region ? region : "请选择"
			},
			...mapState({
				homeTip: state => state.app.homeTip,
			})
		},
		methods: {
			handleGetRegion(region) {
				this.region = region;
				console.log("region", this.region)
			},
			tousufn() {
				wx.openCustomerServiceChat({
					extInfo: {
						url: 'https://work.weixin.qq.com/kfid/kfc49fd496002f64760'
					},
					corpId: 'ww26c801ce25ace1c6',
					success(res) {

					},
					fail(res) {

					},
				})


				// if (localStorage.getItem('erweimatext') == 1) {
				// 	this.show_reweima = true
				// 	return
				// }

			},
			async getNum() {
				let task = JSON.parse(uni.getStorageSync('taskInfo', 'session'));
				var res = await uni.$http.post("/wxuser/index/getNum", {
					id: task.task.id
				})
				res = res.data;

				this.userNum = res.data.all_user_num
				this.times = res.data.user_num
				// getNum({
				// 	id: task.task.id
				// }).then((res) => {
				// 	this.userNum = res.data.all_user_num
				// 	this.times = res.data.user_num
				// });
			},

			start() {
				this.$store.commit('SET_HOMETIP', false)
			},
			tsfn1() {
				this.start()
				let task = JSON.parse(uni.getStorageSync('taskInfo', 'session')).task;
				this.$nextTick(() => {
					let url = "/pagesPrize/aboutPrize/information?id=" + task.id
					uni.navigateTo({
						url
					})
				})


			},
			lwfn() {
				this.start()
				let task = JSON.parse(uni.getStorageSync('taskInfo', 'session')).task;
				this.$nextTick(() => {
					let url = '/pagesPrize/aboutPrize/information?id=' + task.id + '&index=1'
					uni.navigateTo({
						url
					})
				})


			},
		},
	};
</script>

<style lang="scss" scoped>
	.tipwrapper {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		background-color: rgba($color: #000000, $alpha: 0.6);
		width: 100%;
		height: 100vh;
		z-index: 10000;

		.popup_erweima_box {
			width: 300rpx;
			height: 300rpx;

			.box1 {
				width: 100%;
				height: 100%;
			}
		}
	}

	.tipbody {
		width: 100%;
		height: 100%;
		position: relative;

		.music {
			position: absolute;
			top: 150rpx;
			left: 20rpx;
		}

		.play {
			animation: music 4s infinite linear;
		}

		.left {


			image {
				width: 61rpx;
				height: 61rpx;

				&.play {
					animation: music 4s infinite linear;
				}
			}

		}
	}

	.tiptop {
		position: absolute;
		top: 150rpx;
		right: 10rpx;
	}

	.infolist {
		max-width: 500rpx;
	}

	.tipbtn {
		width: 160rpx;
		height: 52rpx;
		line-height: 52rpx;
		border-radius: 26rpx;
		line-height: 0;
		background: #FB340C;
		// background-color: #85c2ff;
	}

	.hometipbox {
		width: 807rpx;
		margin: 0 auto;
		position: relative;



		.hometips {
			width: 807rpx;
			height: 839rpx;
		}

		.gametext {
			position: absolute;
			bottom: 210rpx;
			left: 200rpx;
			width: 4.5rem;

			image {
				width: 338rpx;
				height: 81rpx;
			}
		}

		.gamenum {
			position: absolute;
			bottom: 40rpx;
			left: 60rpx;
			width: 600rpx;
		}
	}

	.infodraw {
		position: absolute;
		right: 60rpx;
		bottom: 40rpx;


		image {
			width: 76rpx;
			height: 76rpx;
		}
	}

	.infocomplain {
		position: absolute;
		left: 60rpx;
		bottom: 60rpx;
	}

	.gamebtn {
		margin-top: 4.48rem;
		width: 4.2rem;
		height: 1.38rem;
		border-radius: 1.7rem;
		background-color: #76b9fe;
		border: 1px solid #007cff;
		line-height: 0;
	}

	.po_bottom {
		position: absolute;
		right: 0;
		bottom: 0.6rem;
	}

	.gift {
		width: 1.386rem;
		height: 1.386rem;
		margin-bottom: 30px;
	}

	.tips2 {
		width: 0.85rem;
		height: 0.85rem;
	}
</style>